<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {

            document.querySelector("#myform").onsubmit = function () {
                return checkUserName() && checkPassWord() && checkEmail();
            }

            var username = document.querySelector("#username");
            var password = document.querySelector("#password");
            var email = document.querySelector("#email");

            username.onblur = checkUserName;
            password.onblur = checkPassWord;
            email.onblur = checkEmail;



            //验证用户名
            function checkUserName() {
                //定义需要匹配的正则
                var reg = /^[a-zA-Z0-9-_]{6,16}$/;
                //获取到用户名的值
                var usernameVal = username.value.trim();

                //判断用户输入的值是否满足正则表达式
                var falg = reg.test(usernameVal)

                //提示的标签
                var msg = document.querySelector("#umsg");

                if (!falg) {
                    //不符合规则
                    msg.innerHTML = "用户名必须包含字母、数字、下划线且6-16个字符之间";
                    msg.style.color = "red";
                    return flag;
                }

                msg.innerHTML = "用户名正确";
                msg.style.color = "green";
                return flag;


            }



            //验证密码
            function checkPassWord() {
                //定义密码正则表达式
                var reg = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]])[A-Za-z\d`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]]{8,}$/;

                //获取密码值
                var pwdVal = password.value.trim();

                //判断用户输入的值是否满足正则表达式
                var falg = reg.test(pwdVal);

                //提示的标签
                var msg = document.querySelector("#pmsg");

                if (falg) {
                    msg.innerHTML = "密码正确";
                    msg.style.color = "green";
                } else {
                    //不符合规则
                    msg.innerHTML = "密码至少8位且必有数字+特殊字符+字母";
                    msg.style.color = "red";
                }
                return falg;

            }



            //验证邮箱
            function checkEmail() {
                var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;

                var emailVal = email.value.trim();
                var flag = reg.test(emailVal);

                //提示的标签
                var msg = document.querySelector("#emsg");
                if (flag) {
                    msg.innerHTML = "邮箱正确";
                    msg.style.color = "green";
                } else {
                    //不符合规则
                    msg.innerHTML = "邮箱不符合规则";
                    msg.style.color = "red";
                }

                return flag;

            }


        }

    </script>
</head>

<body>
    <!-- 定义表单 -->
    <form action="#" method="post" id="myform">
        <table>
            <tr>
                <td>用户名:</td>
                <td><input type="text" name="username" id="username" placeholder="用户名..."></td>
                <td><span id="umsg">(*请输入您的用户名)</span></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="password" name="password" id="password" placeholder="密码..."></td>
                <td><span id="pmsg">(*请输入您的密码)</span></td>
            </tr>
            <tr>
                <td>邮箱:</td>
                <td><input type="text" name="email" id="email" placeholder="邮箱..."></td>
                <td><span id="emsg">(*请输入您的邮箱)</span></td>
            </tr>
            <tr>
                <td><input type="submit" value="注册"></td>
                <td><input type="reset" value="取消"></td>
            </tr>
        </table>

    </form>

</body>

</html>